<!-- 
    RebeccaH: 10/3/2013:
    This test was originally part of the Regions + Multicolumn suite
    but was deemed not useful in the context of regions, possibly
    better for fragmentation. Stashing it here to be revisited later
    if we want to submit it for that spec 
    
    See:
    https://github.com/rhauck/csswg-test/commit/94d7d1a73297ccb1d71314725ac9e556f9c62ca3#commitcomment-4234764
-->

<!DOCTYPE html>
<html>
<head>
    <title>CSS Test: Single named flow monolithic content + one region 
                     fragmented across multiple columns </title>
    <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
    <link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property"/>
    <link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-from-property"/>
    <link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/>
    <link rel="match" href="reference/regions-multicol-002-ref.html"/>
    <meta name="assert" content="This test checks that the named flow monolithic
                                 content flows through the three columns defined
                                 in the multicolumn layout that is applied to 
                                 the region's parent."/>
    <style type="text/css">
        #multicol-container {
            position: absolute;
            top: 70px;
            left: 20px;
            width: 360px;
            height: 200px;
            -webkit-columns: 3;
            -webkit-column-gap: 30px;
        }
        #named-flow {
            width: 100px;
            height: 600px;
            background-color: green;
            -webkit-flow-into: multicol;
        }
        #region {
            -webkit-flow-from: multicol;
        }
       .failure {
           position: absolute;
           top: 70px;
           background-color: red;
           width: 100px;
           height: 200px;
           z-index: -1;
        }
        #block-1 {
            left: 20px;
        }
        #block-2 {
            left: 150px;
        }
        #block-3 {
            left: 280px;
        }
    </style>
</head>
    <body>
    <p>The test passes if there are three vertical green rectangles and no red.</p> 
    <div id="named-flow"></div>
    <div id="multicol-container">
        <div id="region"></div>
    </div>
    <div class="failure" id="block-1"></div>
    <div class="failure" id="block-2"></div>
    <div class="failure" id="block-3"></div>
    </body>
</html>
